<template>
  <div
    class="container-wrapper element"
    :class="{ isActive: isActive }"
    @click.event.stop="selectElement"
  >
    <p class="section-title">字段表：</p>
    <template v-for="widget in sub" :key="widget.id">
      <component
        :is="widget.name + 'Source'"
        :id="widget.id"
        readonly
        :config="widget.props"
        @select="subSelect"
      ></component>
    </template>
    <div style="padding-top: 14px; padding-bottom: 14px">
      <el-button type="primary" @click.event.stop="addRow">添加</el-button>
    </div>
    <div>
      <el-table :data="tableData" style="width: 100%" border>
        <template v-for="(item, index) in sub">
          <el-table-column
            :prop="item.props.fieldName"
            :label="item.props.fieldLabel"
            :width="item.width ? item.width : '180px'"
          />
        </template>
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts" name="OproTableSource">
import { defineProps, ref, inject, computed } from 'vue'
import { generateId } from '@/util/index.ts'

const props = defineProps<{ config: any; sub: WidgetConfig[]; id: string }>()
const emits = defineEmits(['subChange', 'select'])
const injectWidgetId = ref(inject<String>('activeWidgetId'))
const isActive = computed(() => props.id == injectWidgetId.value)

function addRow() {
  const newRow: WidgetConfig = {
    icon: 'Edit',
    text: '输入框',
    name: 'OproField',
    props: {
      fieldLabel: '字段名',
      fieldName: 'filedName',
      checked: true,
      canSearch: false,
      fieldType: 'input',
      charLength: 50,
    },
    category: 'filed',
  }
  newRow.id = 'OproField' + '-' + generateId()
  emits('subChange', {
    type: 'addRow',
    id: props.id,
    value: newRow,
  })
}

const tableData = ref([])

const selectElement = () => {
  emits('select', props.id)
}

const subSelect = (widgetId: string) => {
  emits('select', widgetId)
}
</script>

<style scoped lang="scss">
.container-wrapper {
  border: 1px solid red;
  min-height: 200px;
}
.section-title {
  border-bottom: 1px solid #ccc;
}
.element {
  padding: 15px;
  border: 1px dashed #ccc;
}
.element.isActive {
  border: 2px solid #409eff;
}
</style>
